<template>
  <div
    tabindex="403"
    ref="downloadBox"
    @mousedown="beginMove"
    class="downloadBox cp"
    :style="{ left: boxLeft + 'rem', top: boxTop + 'rem' }"
    @click="displayDownline"
    @blur="active = false"
    :class="active ? 'active' : ''"
  >
    <div
      class="box  flex-center width_100 height_100"
      :class="active ? 'noTip' : ''"
    >
      <img
        ondragstart="return false"
        class="logo"
        :src="
          active
            ? require('@/assets/common/downloadHigh.png')
            : require('@/assets/common/download.png')
        "
        alt=""
      />
      <div class="num">{{ downloadNum }}</div>
      <section
        @mousedown.stop=""
        @click.stop=""
        v-show="active"
        class="downloadListBox"
        :class="overCenter ? 'showRight' : ''"
      >
        <header class="flex-between">
          <span class="label">下载项（{{ downloadNum }}）</span>
          <span class="btn">全部清除</span>
        </header>
        <main>
          <ul>
            <li v-for="item in downList" :key="item.fileId">
              <div class="flex-start">
                <img class="fileType" :src="item.fileType | imgSrc" alt="" />
                <div class="fileDesc">
                  <div class="fileName">{{ item.fileName }}</div>
                  <div class="fileSize">{{ `${item.fileProgressPercent * item.fileSize / 100}M/${item.fileSize}` }}</div>
                </div>
              </div>
              <el-progress
                :percentage="item.fileProgressPercent"
                :format="formatDownLine"
              ></el-progress>
              <img src="@/assets/common/delete.png" alt="" class="delete cp" />
            </li>
          </ul>
        </main>
      </section>
    </div>
    <div
      class="textbox"
      v-show="moveFile"
      :style="{
        left: fileX + 'rem',
        top: fileY + 'rem',
        transitionDuration: moveSpeed
      }"
    ></div>
  </div>
</template>

<script>
export default {
  props: {
    moveX: Number,
    moveY: Number,
    moveFileX: Number,
    moveFileY: Number
  },
  data () {
    return {
      boxLeft: 18.56,
      boxTop: 1.2,
      startX: 0,
      startY: 0,
      moveFile: false,
      moveSpeed: '1s',
      downloadNum: 0, // 当前下载数
      fileX: 0,
      fileY: 0,
      gapY: 0, // 点击位置与盒子顶部距离差
      gapX: 0, // 点击位置与盒子左边距离差
      active: false, // 是否选中
      overCenter: false, // 下载内容是否在右侧显示  （默认左侧显示）
      downList: [
        {
          fileId: 1,
          fileType: 'docx',
          fileName: '荒古遗尘宝典',
          fileSize: '23',
          fileProgressPercent: 80
        }
      ]
    }
  },
  watch: {
    moveY (val) {
      // 移动下载盒子的Y坐标
      let boxTop = (val - this.gapY) / this.$_currentRem
      if (val < this.gapY) {
        boxTop = 0
      }
      if (
        val + this.$refs.downloadBox.clientHeight - this.gapX >
        document.body.clientHeight
      ) {
        boxTop =
          (document.body.clientHeight - this.$refs.downloadBox.clientHeight) /
          this.$_currentRem
      }
      this.boxTop = boxTop
    },
    moveX (val) {
      // 移动下载盒子时的X坐标
      let boxLeft = (val - this.gapX) / this.$_currentRem
      this.overCenter = val - this.gapX < document.body.clientWidth / 2
      if (val < this.gapX) {
        boxLeft = 0
      }
      if (
        val + this.$refs.downloadBox.clientWidth - this.gapX >
        document.body.clientWidth
      ) {
        boxLeft =
          (document.body.clientWidth - this.$refs.downloadBox.clientWidth) /
          this.$_currentRem
      }
      this.boxLeft = boxLeft
    },
    moveFileY (val) {
      // 监听文件移动动画的起始位置
      if (val) {
        this.fileX = this.moveFileX / this.$_currentRem
        this.fileY = val / this.$_currentRem
        this.moveFile = true
        let timer1 = null
        let timer2 = null
        timer1 = setTimeout(() => {
          this.fileY = this.boxTop
          this.fileX = this.boxLeft
          clearTimeout(timer1)
          timer1 = null
          timer2 = setTimeout(() => {
            clearTimeout(timer2)
            timer2 = null
            this.moveFile = false
            this.downloadNum++
          }, 1000)
        }, 100)
      }
    }
  },
  methods: {
    beginMove (e) {
      // 鼠标按下开始移动
      this.startX = e.pageX
      this.startY = e.pageY
      this.gapX = e.pageX - this.boxLeft * this.$_currentRem
      this.gapY = e.pageY - this.boxTop * this.$_currentRem
      this.$emit('beginMove', true)
    },
    displayDownline () {
      // 展示下载任务
      // console.log(this.moveX, this.startX)
      // console.log(this.moveY, this.startY)
      if (
        this.moveX < this.startX + this.$refs.downloadBox.clientWidth * 0.5 &&
        this.moveY < this.startY + this.$refs.downloadBox.clientHeight * 0.5
      ) {
        this.startX = this.moveX
        this.startY = this.moveY
        this.active = !this.active
      }
    },
    clickClose () {
      // if (this.active) {
      //   this.active = false
      // }
    },
    formatDownLine (percent) {
      return ''
    }
  }
}
</script>

<style lang="scss" scoped>
.downloadBox {
  z-index: 10086;
  position: fixed;
  width: 40px;
  height: 40px;
  background: #ffffff;
  border-radius: 2px;
  box-shadow: 0px 2px 8px 0px rgba(13, 23, 44, 0.1);
  outline: none;
  .box {
    position: relative;
    &:hover {
      opacity: 0.8;
      &::before {
        content: "下载项";
        min-width: 64px;
        background: rgba(255, 255, 255, 0.95);
        padding: 3px 14px;
        position: absolute;
        text-align: center;
        right: 48px;
        top: 50%;
        transform: translateY(-50%);
        height: 24px;
        font-size: 12px;
        font-family: PingFangSC, PingFangSC-Regular;
        color: #0d172c;
        line-height: 24px;
        border-radius: 2px;
        box-shadow: 0px 2px 8px 0px rgba(13, 23, 44, 0.1);
      }
    }
    .logo {
      width: 24px;
      height: 24px;
    }
    .num {
      position: absolute;
      left: 100%;
      top: -30%;
      padding: 0 8px;
      border-radius: 16px;
      font-size: 20px;
      background: #ff3e6d;
      text-align: center;
      color: #ffffff;
      line-height: 28px;
      transform: scale(0.5) translateX(-100%);
    }
    section.downloadListBox {
      cursor: default;
      position: absolute;
      top: 0;
      right: 48px;
      width: 360px;
      height: 640px;
      opacity: 1;
      background: #ffffff;
      border-radius: 4px;
      box-shadow: 0px 4px 20px 4px rgba(13, 23, 44, 0.1);
      header {
        padding: 0 16px;
        height: 52px;
        background: #f6f7fb;
        span {
          height: 20px;
          line-height: 20px;
          font-size: 14px;
        }
        .label {
          color: #0d172c;
          font-weight: 500;
        }
        .btn {
          color: #5f7196;
        }
      }
      main {
        padding: 0 20px;
        ul {
          li {
            padding-top: 12px;
            padding-bottom: 6px;
            position: relative;
            img.fileType {
              width: 40px;
              height: 40px;
            }
            .fileDesc {
              margin-left: 8px;
              .fileName {
                height: 20px;
                font-size: 14px;
                font-family: PingFangSC, PingFangSC-Regular;
                font-weight: 400;
                text-align: left;
                color: #0d172c;
                line-height: 20px;
                margin-bottom: 7px;
              }
              .fileSize {
                height: 17px;
                opacity: 1;
                font-size: 12px;
                font-family: PingFangSC, PingFangSC-Regular;
                font-weight: 400;
                text-align: left;
                color: #5f7196;
                line-height: 17px;
              }
            }
            img.delete {
              position: absolute;
              width: 16px;
              height: 16px;
              right: 0;
              top: 50%;
              transform: translateY(-50%);
            }
            ::v-deep .el-progress {
              line-height: 2px;
              width: calc(100% - 32px);
              .el-progress-bar {
                width: calc(100% - 8px);
                margin: 0;
                margin-left: 8px;
                .el-progress-bar__outer {
                  height: 2px !important;
                  background: #ebedf3;
                  .el-progress-bar__inner {
                    background-color: #1ac47c;
                  }
                }
                .el-progress__text {
                  display: none;
                }
              }
            }
          }
        }
      }
    }
    .showRight {
      top: 0;
      left: 48px;
    }
  }
  .noTip {
    &:hover {
      opacity: 1;
      &::before {
        display: none;
      }
    }
  }
  .textbox {
    position: fixed;
    width: 40px;
    height: 40px;
    background: plum;
    transition: all;
  }
}
.active {
  background: #304eec;
}
</style>
